<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.EquipInspecRecord"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      @closed="closeDialog"
    >
      <div id="htmlContent" style="width: 700px">
        <div style="text-align: center; width: 100%">
          <div style="font-size: 25px; font-weight: bold; margin-bottom: 10px">
            {{ dataList.EquipInspecRecord }}
          </div>
          <table
            style="border: 1px solid black; width: 700px"
            cellspacing="0"
            cellpadding="0"
          >
            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.DeviceName }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  width: 250px;
                  border-bottom: 1px solid black;
                "
              >
                {{ formData.deviceDto.name }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                  border-bottom: 1px solid black;
                "
              >
                {{ dataList.DeviceSpecifications }}
              </td>
              <td style="width: 250px; border-bottom: 1px solid black">
                {{ formData.deviceDto.specifications }}
              </td>
            </tr>

            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                  border-bottom: 1px solid black;
                "
              >
                {{ dataList.DeviceNumber }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  width: 250px;
                  border-bottom: 1px solid black;
                "
              >
                {{ formData.deviceDto.num }}
              </td>
              <td
                style="
                  border-right: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                  border-bottom: 1px solid black;
                "
              >
                {{ dataList.InspectionTime }}
              </td>
              <td style="width: 250px; border-bottom: 1px solid black">
                {{ formatTime(formData.verificationDate) }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                  border: 1px solid black;
                "
              >
                {{ dataList.Type }}
              </td>
              <td style="border-bottom: 1px solid black" colspan="3">
                {{ formData.deviceDto.classifyName }}
              </td>
            </tr>
            <tr style="height: 35px">
              <td
                style="
                  border-right: 1px solid black;
                  border-bottom: 1px solid black;
                  width: 100px;
                  text-indent: 10px;
                "
              >
                {{ dataList.InspectionProcedure }}
              </td>
              <td style="border-bottom: 1px solid black" colspan="3">
                {{ formData.verificationMethod }}
              </td>
            </tr>

            <tr>
              <td colspan="4" style="border-bottom: 1px solid black">
                <div
                  style="
                    text-align: left;
                    text-indent: 10px;
                    height: 35px;
                    padding-top: 8px;
                  "
                >
                  {{ dataList.QueryRecord }}:
                </div>
                <div v-html="formData.content"></div>
              </td>
            </tr>
            <tr>
              <td colspan="4" style="border-bottom: 1px solid black">
                <div
                  style="
                    text-align: left;
                    text-indent: 10px;
                    height: 35px;
                    padding-top: 8px;
                  "
                >
                  {{ dataList.InspectionCon }}:{{ formData.conclusionName }}
                </div>
                <div
                  style="
                    text-align: left;
                    text-indent: 10px;
                    height: 35px;
                    padding-top: 8px;
                  "
                >
                  {{ dataList.ConclusionReason }}:{{
                    formData.conclusionReason
                  }}
                </div>
              </td>
            </tr>
            <tr style="height: 35px">
              <td style="border-right: 1px solid black">
                {{ dataList.Inspector }}:
              </td>
              <td colspan="3" style="text-align: left; text-indent: 10px">
                {{ formData.verPerson.name }}
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button v-if="!printState" type="primary" @click="exportWord()">{{
          btn.Export
        }}</el-button>
        <el-button v-else type="primary" @click="print()">{{
          btn.Print
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from "../../../api/DeviceVerificationTask.js";
import { mapGetters } from "vuex";
import { exportWord } from "mhtml-to-word";
import printJS from "print-js";
import { formatTime } from "../../../utils/time";
export default {
  name: "DeviceVerificationTaskExportView",
  components: {},
  props: {
    printState: {
      type: Boolean,
      default: false,
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "0",
    },
  },

  data() {
    return {
      list: [],
      size: "12px",
      listDeviceVerification: [],
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "120px",
      formData: {
        verificationPersonName: "",
        sysBusinessImgWarehouseList: [],
        sysBusinessFileWarehouseList: [],
        conclusion: "",
        conclusionReason: "",
        deviceStatusName: "",
        verificationDateNext: "",
      },
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    this.initData();
  },
  methods: {
    formatTime,
    exportWord() {
      exportWord({
        selector: "#htmlContent",
        style: "",
        filename: this.dataList.EquipInspecRecord,
      });
    },
    // 打印
    initData() {
      this.loading = true;
      getList({ id: this.id })
        .then((res) => {
          if (res.data.dataList != null && res.data.dataList.length > 0) {
            this.formData = res.data.dataList[0];
          }

          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    print() {
      const divToPrint = document.getElementById("htmlContent");
      printJS({
        printable: divToPrint,
        type: "html", // 继承样式
        targetStyle: "*",
        targetStyles: "*",
        scanStyles: true,
        // 默认800，设置1000是因为我窗口宽度是1000，而导致页面靠近左边，设置1000就正常居中了。
        maxWidth: "1000",
      });
    },
    getUrl(url) {
      // var res = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${url}`;
      var res = `${url}`;
      return res;
    },
    cancel() {
      this.$emit("update:dialogFormVisible", false);
    },
    closeDialog() {
      this.cancel();
    },
  },
};
</script>
<style>
.tab_txt {
  align-items: center;
  display: flex;
  text-indent: 10px;
}
img {
  max-width: 700px;
}
</style>
